<template>
    <div id="main">
        <el-form :model="ruleForm"  :rules="rules" ref="ruleForm"  label-width="100px" class="demo-ruleForm">

            <el-form-item label="名字"  prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="品种"   prop="type">
                <el-input v-model="ruleForm.type"></el-input>
            </el-form-item>

            <el-form-item label="年龄"   prop="age">
                <el-input v-model="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item label="性别"  prop="sex">
                <el-input v-model="ruleForm.sex"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="info">
                <el-input v-model="ruleForm.info"></el-input>
            </el-form-item>
            <el-form-item label="是否被领养" prop="is_adopted">
                <el-input v-model="ruleForm.is_adopted"></el-input>
            </el-form-item>
            <!--图片上传-->
            <el-form-item label="照片">
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8081/user/upload"
                        :before-upload="before"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :on-err="uploadErr"
                        :with-credentials="true">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

            </el-form-item>

            <el-form-item  >
                <el-button v-on:click="modifyPet()">修改</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    export default {
        name: "AdminModifyPet",
        data(){
            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                }

            };
            var checkSex= (rule, value, callback) => {
                var pa = ["公","母"]
                if(!pa.includes(value)){
                    callback(new Error('性别只能为公、母'));
                }
            }
            return{
                imageUrl:'',
                ruleForm: {
                    name:'',
                    type:'',
                    img:'',
                    age:'',
                    sex:'',
                    info:'',
                    is_adopted:Boolean(),
                },
                rules: {
                    name: [
                        {required: true, message: '请输入名字', trigger: 'blur'},
                        {min: 1, max:8, message: '长度在 1 到 8个字符', trigger: 'blur'}
                    ],
                    type:[
                        {required: true, message: '请输入品种', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2到 10 个字符', trigger: 'blur'}
                    ],
                    age: [
                        { validator: checkAge, trigger: 'blur' },
                    ],
                    sex:[
                        { validator: checkSex, trigger: 'blur' },
                    ]

                }
            }
        },mounted(){
            console.log("修改pet:id="+this.$route.params.id)
            this.$http.get("http://localhost:8081/pet/findPetById?id="+this.$route.params.id+"").then(req => {
                this.ruleForm =req.data[0]
            })
        },
        methods:{
            before(file){
                console.log("上传文件前====》")

            },
            handleAvatarSuccess(res, file) {
                this.ruleForm.img= file.name;//从后台获取filename给path赋值
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            uploadErr(err,file,fileList){
                console.log("upload err=========>"+file.name)
            },
            modifyPet(){
                console.log("修改pet")
                let id = this.$route.params.id;
                let name=this.ruleForm.name;
                let type=this.ruleForm.type;
                let img=this.ruleForm.img;
                let info=this.ruleForm.info;
                let sex=this.ruleForm.sex;
                let age=this.ruleForm.age;
                let is_adopted=this.ruleForm.is_adopted;
                //将参数传递到后台
                this.$http.get("http://localhost:8081/pet/modifyPet?name="+name+"&type="+type+"&img="+img+
                    "&info="+info+"&sex="+sex+"&age="+age+"&is_adopted="+is_adopted+"&id="+id+"").then(req=>{
                    if(req.data){
                        this.$router.push("/adminPet");
                    }else{
                        alert("失败")
                    }
                })
            },

        },





    }
</script>

<style scoped>
    #main{
        padding: 0;
        margin: 0;
        margin: 0 auto;
        width: 600px;
        height: 600px;

    }
</style>